<template>
  <div class="about-container">
    <div class="about-header">
      <h1>关于我们</h1>
      <p class="about-desc">简单工具集是一个提供各种实用在线工具的平台，旨在提高您的工作效率。</p>
    </div>

    <el-divider />

    <div class="about-content">
      <div class="about-section">
        <h2>我们的使命</h2>
        <p>我们的使命是提供简单易用、高效实用的在线工具，帮助用户解决日常工作和生活中的各种问题，提高工作效率。</p>
      </div>

      <div class="about-section">
        <h2>我们的特点</h2>
        <div class="features-grid">
          <div class="feature-item">
            <el-icon class="feature-icon"><Tools /></el-icon>
            <h3>丰富的工具</h3>
            <p>提供多种类型的实用工具，满足您的各种需求</p>
          </div>
          <div class="feature-item">
            <el-icon class="feature-icon"><Monitor /></el-icon>
            <h3>在线使用</h3>
            <p>无需下载安装，随时随地在线使用</p>
          </div>
          <div class="feature-item">
            <el-icon class="feature-icon"><Lock /></el-icon>
            <h3>安全可靠</h3>
            <p>数据本地处理，保障您的信息安全</p>
          </div>
          <div class="feature-item">
            <el-icon class="feature-icon"><Refresh /></el-icon>
            <h3>持续更新</h3>
            <p>定期更新和优化工具，不断提升用户体验</p>
          </div>
        </div>
      </div>

      <div class="about-section">
        <h2>联系我们</h2>
        <p>如果您有任何问题、建议或合作意向，欢迎通过以下方式联系我们：</p>
        <div class="contact-info">
          <p><el-icon><Message /></el-icon> 邮箱：contact@simpletools.com</p>
          <p><el-icon><ChatDotRound /></el-icon> 微信：SimpleTools</p>
        </div>
      </div>

      <div class="about-section">
        <h2>常见问题</h2>
        <el-collapse>
          <el-collapse-item title="使用工具需要付费吗？" name="1">
            <p>目前平台上的大部分工具都是免费使用的。未来可能会推出一些高级功能，需要付费使用。</p>
          </el-collapse-item>
          <el-collapse-item title="我的数据安全吗？" name="2">
            <p>我们非常重视用户数据安全。大多数工具都是在您的浏览器本地处理数据，不会上传到服务器。对于需要服务器处理的工具，我们会在使用前明确告知，并确保数据传输和处理的安全性。</p>
          </el-collapse-item>
          <el-collapse-item title="如何提交新工具建议？" name="3">
            <p>您可以通过联系方式给我们发送邮件，或者在社交媒体上联系我们，提出您的工具建议。我们非常欢迎用户的反馈和建议。</p>
          </el-collapse-item>
          <el-collapse-item title="工具有使用次数限制吗？" name="4">
            <p>免费工具通常没有使用次数限制，但为了防止滥用，某些资源密集型工具可能会有合理的使用限制。</p>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Tools, Monitor, Lock, Refresh, Message, ChatDotRound } from '@element-plus/icons-vue'
</script>

<style scoped>
.about-container {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.about-header {
  text-align: center;
  margin-bottom: 30px;
}

.about-header h1 {
  font-size: 2.5rem;
  color: #303133;
  margin-bottom: 15px;
}

.about-desc {
  font-size: 1.2rem;
  color: #606266;
  max-width: 700px;
  margin: 0 auto;
}

.about-section {
  margin-bottom: 40px;
}

.about-section h2 {
  font-size: 1.8rem;
  color: #303133;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.about-section h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: #409eff;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 20px;
}

.feature-item {
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  background-color: #f5f7fa;
  transition: transform 0.3s, box-shadow 0.3s;
}

.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  font-size: 2.5rem;
  color: #409eff;
  margin-bottom: 15px;
}

.feature-item h3 {
  font-size: 1.2rem;
  color: #303133;
  margin-bottom: 10px;
}

.feature-item p {
  color: #606266;
  font-size: 0.9rem;
}

.contact-info {
  margin-top: 15px;
}

.contact-info p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 1rem;
}

.contact-info .el-icon {
  color: #409eff;
}
</style> 